﻿@{
    ViewBag.Title = "Edit UI Template";
    Layout = "~/Views/Master/_LoggedInLayout.cshtml";
}
@section headerscripts{
    <script type="text/javascript" src="../../Scripts/Application/UIControls.js"></script>
    <script type="text/javascript" src="../../Scripts/Pages/UITemplateEditor.js"></script>
    <script type="text/javascript" src="../../Scripts/CodeMirror/utils/formatting.js"></script>
    <script type="text/javascript" src="../../Scripts/CodeMirror/utils/closetag.js"></script>
    <script type="text/javascript" src="../../Scripts/CodeMirror/utils/foldcode.js"></script>
    <script type="text/javascript" src="../../Scripts/CodeMirror/modes/xml.js"></script>
    <script type="text/javascript" src="../../Scripts/CodeMirror/modes/css.js"></script>
    <script type="text/javascript" src="../../Scripts/CodeMirror/modes/javascript.js"></script>
    <script type="text/javascript" src="../../Scripts/CodeMirror/modes/htmlmixed.js"></script>
    <script type="text/javascript">

        //General functions~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        var uiTemplateID = '@(ViewBag.UITemplateID)';
        var uiTemplateDataModel = null, clientController = null;

        function calcWidth() {
            var containerWidth = $(".OuterContentArea .InnerContentArea").width();
            var marginWidth = 31;
            var toolboxwidth = $("#UITemplateToolBox").width();
            var propertiesBoxWidth = $("#UITemplatePropertiesBox").width();
            var mainboxWidth = containerWidth - marginWidth * 2 - toolboxwidth - propertiesBoxWidth;
            $('#UITemplateCodeBox').css("width", mainboxWidth + "px");
        }
        //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        //Load~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        $(document).ready(function () {
            //Event handlers-------------------------------------------------------------------

            //Button handlers
            $("#SaveButton").bind("click", function () {
                clientController.SaveData();
            });

            //HTML controls
            $("#NewTable").bind("click", function () {
                clientController.AddHTMLControl("table");
            });
            $("#NewDiv").bind("click", function () {
                clientController.AddHTMLControl("div");
            });
            $("#NewSpan").bind("click", function () {
                clientController.AddHTMLControl("span");
            });

            //Simple UI controls
            $("#NewLabel").bind("click", function () {
                clientController.AddUIControl("Label");
            });
            $("#NewTextbox").bind("click", function () {
                clientController.AddUIControl("Textbox");
            });
            $("#NewCheckbox").bind("click", function () {
                clientController.AddUIControl("Checkbox");
            });
            $("#NewDropdown").bind("click", function () {
                clientController.AddUIControl("Dropdown");
            });
            $("#NewCheckboxList").bind("click", function () {
                clientController.AddUIControl("CheckboxList");
            });
            $("#NewRadiobuttonList").bind("click", function () {
                clientController.AddUIControl("RadiobuttonList");
            });

            //Key handlers
            $(document).keydown(function (e) {

                $.ctrl('S', function () { //create Feature
                    clientController.SaveData();
                });
            });
            //---------------------------------------------------------------------------------

            //Initialize
            $(window).resize(function () {
                calcWidth();
            });
            $("#UITemplatesMenuItem").attr("selected", "selected");
            $("#ToolboxMenu").accordion({
                active: 1
            });
            $("#MainViewTabs").tabs({ select: function (event, ui) {

                var tabname = $(ui.tab).attr("tabname");
                var titleLabel = $("#UITemplateCodeBox").find(".BoxHeader .HeaderLabel");

                //
                switch (tabname) {
                    case "CSS":
                        $("#HideToolboxDiv").css("display", "block");
                        $("#HidePropertiesboxDiv").css("display", "block");
                        clientController.RefreshCSSEditor();
                        break;
                    case "HTML":
                        $("#HideToolboxDiv").css("display", "none");
                        $("#HidePropertiesboxDiv").css("display", "block");
                        clientController.RefreshHTMLEditor();
                        break;
                    case "Visual":
                        $("#HideToolboxDiv").css("display", "block");
                        $("#HidePropertiesboxDiv").css("display", "block");
                        break;
                }
                clientController.SetControlFocus(tabname);

            }
            });
            calcWidth();


            //Load data
            $.timer(300, function () {

                //Instantiate/Initialize controls
                uiTemplateDataModel = new UITemplateDataModel(uiTemplateID);
                uiTemplateDataModel.Initialize();

                clientController = new ClientController($("#HTMLEditorTextarea"), $("#CSSEditorTextarea"), $("#VisualEditorInnerarea"), $("#UITemplateNameTextbox"), uiTemplateDataModel);
                clientController.Initialize();
            });
        });
        //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    </script>
}
@section SubMenuSpecialBar{
    <div class="MenuItemSeparator">
        ></div>
    <div class="SubMenuSpecialBar">
        <input id="UITemplateNameTextbox" class="Textbox" type="text" value="Please wait..." />
        <div class="Button-Toolbar" id="SaveButton">
            <img src="../../Content/themes/base/images/Icons/save.png" />
            <span>Save</span>
        </div>
    </div>
}
@section RootBreadCrumb {
Edit Template
}
<div class="LeftColumn">
    @*UITemplateToolBox*@
    <div id="UITemplateToolBox" class="RoundedBox">
        <div class="BoxHeader">
            <div class="BoxInnerHeader">
                <span class="HeaderLabel">Toolbox</span>
            </div>
        </div>
        <div class="BoxContent">
            <div id="ToolboxMenu" class="Accordion">
                <span>HTML elements</span>
                <div>
                    <div class="Accordion-Item" id="NewTable">
                        <span>Table</span>
                    </div>
                    <div class="Accordion-Item" id="NewDiv">
                        <span>Div</span>
                    </div>
                    <div class="Accordion-Item" id="NewSpan">
                        <span>Span</span>
                    </div>
                </div>
                <span>Simple UI controls</span>
                <div>
                    <div class="Accordion-Item" id="NewLabel">
                        <span>Label</span>
                    </div>
                    <div class="Accordion-Item" id="NewTextbox">
                        <span>Textbox</span>
                    </div>
                    <div class="Accordion-Item" id="NewCheckbox">
                        <span>Checkbox</span>
                    </div>
                    <div class="Accordion-Item" id="NewDropdown">
                        <span>Dropdown</span>
                    </div>
                    <div class="Accordion-Item" id="NewCheckboxList">
                        <span>Checkbox List</span>
                    </div>
                    <div class="Accordion-Item" id="NewRadiobuttonList">
                        <span>Radiobutton List</span>
                    </div>
                </div>
                <span>Composite UI controls</span>
                <div>
                    <div class="Accordion-Item" id="NewTabsButton">
                        <span>Tabs</span>
                    </div>
                    <div class="Accordion-Item" id="NewPanelButton">
                        <span>Panel</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="BoxFooter">
            <div class="BoxInnerFooter">
            </div>
        </div>
    </div>
    <div id="HideToolboxDiv">
    </div>
</div>
<div class="RightColumn">
    @*Properties*@
    <div id="UITemplatePropertiesBox" class="PropertiesBox RoundedBox">
        <div class="BoxHeader">
            <div class="BoxInnerHeader">
                <span class="HeaderLabel">Properties - <span id="SetTypeLabel"></span></span>
            </div>
        </div>
        <div class="BoxContent">
            <div id="MainContainer">
            </div>
        </div>
        <div class="BoxFooter">
            <div class="BoxInnerFooter">
            </div>
        </div>
    </div>
    <div id="HidePropertiesboxDiv">
    </div>
</div>
<div class="CenterColumn">
    @*UITemplateCodeBox*@
    <div id="UITemplateCodeBox" class="RoundedBox">
        <div class="BoxHeader">
            <div class="BoxInnerHeader">
                <span class="HeaderLabel">Template view</span>
            </div>
        </div>
        <div class="BoxContent">
            <div id="MainViewTabs" class="MainViewTabs">
                <ul>
                    <li><a href="#tabs-1" tabname="HTML">HTML</a></li>
                    <li><a href="#tabs-2" tabname="CSS">CSS</a></li>
                    <li><a href="#tabs-3" tabname="Visual">Visual</a></li>
                </ul>
                <div id="tabs-1">
                    <textarea id="HTMLEditorTextarea" style="display: none"></textarea>
                </div>
                <div id="tabs-2">
                    <textarea id="CSSEditorTextarea" style="display: none"></textarea>
                </div>
                <div id="tabs-3">
                    <div id="VisualEditorInnerarea">
                    </div>
                </div>
            </div>
        </div>
        <div class="BoxFooter">
            <div class="BoxInnerFooter">
            </div>
        </div>
    </div>
</div>
